<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/css/select2.min.css" rel="stylesheet"/>
</head>
<body>
<div>
    <select class="form-control" id="select2" style="width: 100%" multiple="multiple">
        <option value="1">OPS-COFFEE-A</option>
        <option value="2">OPS-COFFEE-B</option>
        <option value="3">OPS-COFFEE-C</option>
        <option value="4">OPS-COFFEE-D</option>
        <option value="5">OPS-COFFEE-E</option>
        <option value="6">OPS-COFFEE-F</option>
        <option value="7">OPS-COFFEE-G</option>
    </select>
</div>
<script src="__STATIC__/jquery/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.min.js"></script>
<script type="text/javascript">
    var sdata = [
        {id: 1, text: 'OPS-COFFEE-1'},
        {id: 2, text: 'OPS-COFFEE-2'},
        {id: 3, text: 'OPS-COFFEE-3'}
    ]

    var selectorx = $('#select2').select2({
        minimumResultsForSearch: 1
    });
    // selectorx.val([1,3,4]).trigger("change");

    /**
     * change.select2： 新增select数据后触发select2更新
     * .select2("open")： 打开select，open改为close可动态关闭select，改为destroy可销毁select2，恢复select默认样式
     * */
    var option = '<option value="9" selected>ops-coffee.cn</option>';
    selectorx.append(option).trigger('change.select2').select2("open");
</script>
</body>
</html>